<template>
  <BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose :title="title" :width="800" @ok="handleSubmit">
    <BasicForm @register="registerForm" ref="formRef" name="DwOrderForm"/>
    <a-tabs v-model:activeKey="activeKey" animated @change="handleChangeTabs">
      <a-tab-pane tab="设备型号" key="dwOrderProduct" :forceRender="true">
        <!-- JVxeTable配置：简化不必要属性，确保实例正常 -->
        <JVxeTable
          ref="dwOrderProductRef"
        :columns="dwOrderProductTable.columns"
        :dataSource="dwOrderProductTable.dataSource"
        :height="340"
        :rowNumber="true"
        :rowSelection="true"
        :disabled="false"
        :toolbar="true"
        @toolbar-click="handleToolbarClick"
        >
        <!-- 自定义插槽：简化参数，仅传递必要的rowIndex和column -->
        <template #proModelSlot="{ rowIndex, column }">
            <!-- 3. 修复v-model绑定：确保初始值为数组（匹配multiple=true） -->
            <!-- 4. 修复事件传递：仅传递选择值和行索引，避免row引用问题   @chang-->
            <!--  @click.stop 5. 阻止事件冒泡，避免表格单元格事件覆盖 -->
            <JCategorySelect
            v-model="selectedProModels[rowIndex]"
            :pcode="column.slotParams.pcode"
            :multiple="false"
            :disabled="false"
            style="width: 100%"
            @change="(value) => handleCategoryChange(rowIndex, column.key, value)"
            @click.stop
            />

        </template>
       </JVxeTable>
      </a-tab-pane>
    </a-tabs>
  </BasicModal>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, nextTick } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { BasicForm, useForm } from '/@/components/Form/index';
import { JVxeTable } from '/@/components/jeecg/JVxeTable';
// 6. 确保JCategorySelect导入路径正确（Jeecg3.8默认路径）
import {JCategorySelect} from  '/@/components/Form';
import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods.ts';
import { formSchema, dwOrderProductColumns, CategoryItem } from '../DwOrder.data';
import { saveOrUpdate, dwOrderProductList } from '../DwOrder.api';
import { defHttp } from '/@/utils/http/axios';
import { message } from 'ant-design-vue';

// 7. 扩展Window类型，缓存分类数据
declare global {
  interface Window {
    _categoryCache?: Record<string, CategoryItem[]>;
  }
}

// 8. 状态管理：初始化临时选择值数组（核心修复：确保与多选配置匹配）
const selectedProModels = ref<Array<string[]>>([]);  // 二维数组：每行对应一个数组（多选）
const dwOrderProductRef = ref();  // 表格实例引用
const dwOrderProductTable = reactive({
  loading: false,
  // 9. 明确数据源类型：proModel初始化为空数组
  dataSource: [] as Array<{
    proModel: string[];  // 强制数组类型，匹配multiple=true
    isHeat?: string;
    num?: number;
    descc?: string;
    orderFkId?: string;
    proVol?: string;
    proHeat?: string;
    proHeatNum?: number;
  }>,
  columns: dwOrderProductColumns
});

// 10. 监听数据源变化，同步临时选择值（确保新增行有初始值）
watch(
  () => dwOrderProductTable.dataSource,
  (newData) => {
    // 初始化临时选择值：新行默认空数组
    const newSelected = newData.map((row, index) => {
      return Array.isArray(row.proModel) ? row.proModel : [];
    });
    selectedProModels.value = newSelected;
  },
  { deep: true, immediate: true }
);

// 11. 监听临时选择值变化，同步到表格数据源（核心修复：双向绑定）
watch(
  selectedProModels.value,
  (newValues) => {
    if (newValues.length !== dwOrderProductTable.dataSource.length) return;

    // 同步到数据源，避免直接修改row导致的响应式问题
    const newDataSource = dwOrderProductTable.dataSource.map((row, index) => ({
      ...row,
      proModel: newValues[index]
    }));
    dwOrderProductTable.dataSource = newDataSource;

    // 12. 调用表格API刷新数据（使用正确的全量更新方法）
    if (dwOrderProductRef.value) {
      dwOrderProductRef.value.setTableData(newDataSource);  // 正确方法：全量更新表格数据
    }
  },
  { deep: true }
);

// 其他基础配置（表单、模态框等）
const [registerForm, { setProps, resetFields, setFieldsValue }] = useForm({
  labelWidth: 150,
  schemas: formSchema,
  showActionButtonGroup: false,
  baseColProps: { span: 24 }
});

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  await reset();
  setModalProps({ confirmLoading: false, showCancelBtn: data?.showFooter, showOkBtn: data?.showFooter });
  const isUpdate = !!data?.isUpdate;

  if (isUpdate && data?.record?.id) {
    await setFieldsValue({ ...data.record });
    // 13. 加载子表数据：确保proModel为数组类型
    await requestSubTableData(dwOrderProductList, { id: data.record.id }, dwOrderProductTable);
    nextTick(() => {
      // 同步临时选择值
      selectedProModels.value = dwOrderProductTable.dataSource.map(row => row.proModel || []);
    });
  }
  setProps({ disabled: !data?.showFooter });
});

// 14. 简化JVxeMethod调用：避免钩子函数覆盖事件
const [handleChangeTabs, handleSubmit, requestSubTableData] = useJvxeMethod(
  requestAddOrEdit,
  classifyIntoFormData,
  { dwOrderProduct: dwOrderProductRef },  // 传递正确的表格实例
  ref('activeKey'),
  ref(['dwOrderProduct'])
);

// 15. 工具栏新增按钮处理：确保新增行proModel初始化为空数组
function handleToolbarClick(action: string) {
  if (action === 'add' && dwOrderProductRef.value) {
    // 调用表格自带新增方法
    dwOrderProductRef.value.addRow({
      proModel: [],  // 初始化为空数组，匹配多选
      num: 1,
      orderFkId: ''
    });
    // 同步临时选择值数组
    nextTick(() => {
      selectedProModels.value.push([]);
    });
  }
}

// 16. 分类选择变化处理：仅更新临时值，由watch自动同步到表格
function handleCategoryChange(rowIndex: number, key: string, value: string[]) {
  if (rowIndex >= selectedProModels.value.length) return;
  // 直接更新临时值，watch会自动同步到数据源和表格
  selectedProModels.value[rowIndex] = value;
}

// 17. 预加载分类数据：确保数据格式正确（包含value和label）
async function preloadCategoryData() {
  try {
    const res = await defHttp.get<CategoryItem[]>({
      url: '/sys/category/rootList',  // 正确接口
      params: { pcode: 'A01' }
    });
    // 确保分类数据格式正确
    const validData = res.filter(item => item.value && item.label);
    window._categoryCache = { ...window._categoryCache, 'A01': validData };
  } catch (error) {
    console.error('分类数据加载失败:', error);
    // message.error('机型分类数据加载失败，请重试');
  }
}

// 初始化
onMounted(() => {
  preloadCategoryData();
});

// 其他辅助函数（重置、数据格式化、提交）
async function reset() {
  await resetFields();
  dwOrderProductTable.dataSource = [];
  selectedProModels.value = [];
}

function classifyIntoFormData(allValues) {
  const main = { ...allValues.formValue };
  // 确保子表数据proModel为数组
  const subData = allValues.tablesValue[0].tableData.map(row => ({
    ...row,
    proModel: Array.isArray(row.proModel) ? row.proModel : []
  }));
  return { ...main, dwOrderProductList: subData };
}

async function requestAddOrEdit(values) {
  try {
    setModalProps({ confirmLoading: true });
    await saveOrUpdate(values, !!values.id);
    closeModal();
    emit('success');
    message.success('操作成功');
  } catch (error) {
    message.error('操作失败：' + (error.message || '未知错误'));
  } finally {
    setModalProps({ confirmLoading: false });
  }
}

// Emits声明
const emit = defineEmits(['register', 'success']);
const activeKey = ref('dwOrderProduct');
const formRef = ref();
const title = ref('新增订单');
</script>

<style lang="less" scoped>
// 18. 样式修复：确保选择框下拉菜单正常显示（不被遮挡）
:deep(.ant-select-dropdown) {
  z-index: 9999 !important;  // 高于表格层级
}

:deep(.vxe-cell) {
  overflow: visible !important;  // 允许下拉菜单溢出单元格
}

// 19. 确保选择框可点击
:deep(.ant-select-selector) {
  pointer-events: auto !important;
}
</style>
